<template>
  <table class="settings-table" style="width: 100%">
    <thead>
      <tr>
        <th>类型</th>
        <th>状态</th>
        <th>描述</th>
        <th>备注</th>
        <th class="operation">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(rowData, index) in data" :key="index">
        <td>
          <el-select v-model="rowData.type" @change="handleChange">
            <el-option
              v-for="dict in dict.type.custom_need_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </td>
        <td>
          <el-select v-model="rowData.status" @change="handleChange">
            <el-option
              v-for="dict in dict.type.sys_data_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </td>
        <td>
          <el-input v-model.trim="rowData.description" @change="handleChange" />
        </td>
        <td>
          <el-input v-model.trim="rowData.remark" @change="handleChange" />
        </td>
        <td>
          <i class="el-icon-remove-outline" @click="handleRemove(index)" />
          <i class="el-icon-circle-plus-outline add-icon" @click="handleAdd(index)" />
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'AccidentItemPars',
  props: {
    value: {
      type: Array,
      required: true
    }
  },
  dicts: ['custom_need_type', 'sys_data_status'],
  data() {
    return {
      data: this.value && this.value.length > 0 ? this.value : [{ type: '', status: '', description: '', remark: '' }]
    }
  },
  watch: {
    value(newVal, oldVal) {
      if (!newVal || newVal.length === 0) {
        this.data = [{ type: '', status: '', description: '', remark: '' }]
        return
      }
      const res = []
      newVal.forEach(item => {
        res.push({ type: item.type, status: item.status, description: item.description, remark: item.remark })
      })
      this.data = res
    }
  },
  methods: {
    handleChange() {
      this.$emit('input', this.data)
      this.$emit('change', this.data)
    },
    handleRemove(index) {
      if (this.data.length === 1) {
        this.data = [this.getEmptyRow()]
      } else {
        this.data.splice(index, 1)
      }
      this.handleChange()
    },
    handleAdd(index) {
      this.data.splice(index + 1, 0, this.getEmptyRow())
      this.handleChange()
    },
    getEmptyRow() {
      return { type: '', status: '', description: '', remark: '' }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

.settings-table {
  width: 100%;
  thead > tr {
    background: $background-color;
    th {
      padding: 5px 10px;
      text-align: left;
      border-top: 1px solid $border-color-split;
      color: $label-color;
      font-weight: 400;
      line-height: 1.5;
      &.operation{
        width: 80px
      }
    }
  }
  td {
    padding: 5px 10px;
    border-bottom: 1px solid $border-color-split;
  }
  th:last-child, td:last-child {
    border-right: 1px solid $border-color-split;
  }
  th:first-child, td:first-child {
    border-left: 1px solid $border-color-split;
  }
  .add-icon {
    margin-left: 5px;
  }
}
</style>
